<template>
  <div>
  <sofa-head></sofa-head>
  <sofa-nav></sofa-nav>
      <form class="rigister">
            <h2>注册沙发网</h2>
      <div class="user"><input type="text" placeholder="用户名" id="user"></div>
      <div class="email"><input type="text" placeholder="邮箱"></div>
      <div class="pwd"><input type="password" placeholder="密码"></div>
      <div class="repwd"><input type="password" placeholder="确认密码"></div>
      <div class="btns">
        <button class="btnl" @click="toReg">注册</button> 
        <button class="btnr" @click="toLogin">去登录</button>
      </div>
  </form>
  <foot></foot>
  </div>
 
</template>

<script>
import sofaHead from './header'
import foot from './footer'
import sofaNav from './Nav'
export default {
  components:{
    sofaHead,foot,sofaNav
  },
    methods:{
      toReg(){
        // console.log("toReg");
        var user=document.getElementById("user").value;
        //console.log(user);
       localStorage.setItem("user",user)
      },
      toLogin(){
        //console.log("toLogin");
        var storage=localStorage.getItem("user");
       // console.log(storage);
      }
    }
}
</script>

<style>
  .rigister{
    width: 520px;
    background-color: #f5f5f5;
    margin: 20px auto;
   
  }
  .rigister>div{
    width: 85%;
    height: 35px;
    line-height: 35px;
    margin: 10px auto;
  }
   .rigister>div input{
     width: 100%;
     height: 30px;
     line-height: 30px;
     outline: none;
     border: none;
     border: 1px solid #ccc;
     text-indent: 10px;
     }
  h2{
    padding-top: 20px;
    font-weight: normal;
    font-size: 20px;
    width: 85%;
    margin: 0 auto;
  }
  .btns{
    width: 85%;
     margin: 0 auto;
     padding-bottom:20px;
  }
  .btns .btnl{
    width: 200px;
    height: 30px;
    line-height: 30px;
    border: none;
    outline: none;
    color: #fff;
    background-color: #428bca;
  }
   .btns .btnr{
    width: 120px;
    height: 30px;
    line-height: 30px;
    border: 1px #ccc solid;
    outline: none;
    float: right;
    background-color: #fff;
  }
</style>